<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="formData" :inline="true">
                <el-form-item label="用户名称">
                    <el-input class="w-[280px]" v-model="formData.nickname" placeholder="请输入用户名称" clearable />
                </el-form-item>
                <el-form-item label="订单编号">
                    <el-input class="w-[280px]" v-model="formData.order_no" placeholder="请输入订单编号" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table size="large"  :data="pager.lists" style="width: 100%;margin-top:10px;"  > 
                <el-table-column type="selection" width="55"  />
                <el-table-column label="账号信息" min-width="150">
                    <template #default="{ row }">
                        <div style="display: flex;">
                            <img  :src="row.avatar" style="border-radius: 50%; width: 50px;height: 50px;" />
                        <span style="display: flex; flex-direction: column; margin-left: 20px;">
                            <span style="font-size: 20px;font-weight: 400;">{{ row.nickname }}</span>
                        </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="order_no" label="订单编号" min-width="150"/>
                <el-table-column prop="create_time" label="下单时间" min-width="150"/>
                <el-table-column label="支付金额" min-width="150">
                    <template #default="{ row }">
                        {{row.payment_amount}}元
                    </template>
                </el-table-column>
                <el-table-column label="充值单数" min-width="150">
                    <template #default="{ row }">
                        {{row.num}}单
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" min-width="150">
                    <template #default="{ row }">
                        <div v-if="row.payment_type == 1">
                            微信支付
                        </div>
                        <div v-if="row.payment_type == 2">
                            支付宝支付
                        </div>
                        <div v-if="row.payment_type == 3">
                            后台支付
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="支付状态" min-width="150">
                    <template #default="{ row }">
                        <div v-if="row.pay_status == 1">
                            未支付
                        </div>
                        <div v-if="row.pay_status == 2">
                            已支付
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="250" >
                    <template #default="{ row }">
                        <el-button type="primary" link @click="fk(row.id)" v-if="row.pay_status == 1">
                            确认付款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paginat v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { maporderlist,confirmpay } from "@/api/order/dt";
import feedback from '@/utils/feedback'
import { usePaging } from "@/hooks/usenew";

const formData = ref({
    nickname:"",
    order_no:""
})
const fk = async(id:any) => {
    await feedback.confirm('确定要付款？')
    await confirmpay({id:id})
    getLists()
}
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: maporderlist,
    params: formData.value,
});
getLists()
</script>
<style lang="scss" scoped>

</style>